<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-元素内容操作</title>
    <script src="../js/jquery-3.6.0.js"></script>
    <script>
        $(function () {
            /*$("button:first").click(function () {
                $("p").text("静夜思");
            });
            $("button").eq(1).click(function () {
                alert($("p").text());
            });
            $("button").eq(2).click(function () {
                $("p").text("");
            });*/
            /*$("button").eq(0).click(function () {
                $("#box").html("<p><img src='../images/1.ico'/>篮球</p>");
            });
            $("button").eq(1).click(function () {
                alert($("#box").html());
            });
            $("button").eq(2).click(function () {
                $("#box").html("");
            });*/
            $(function () {
                $("button").eq(0).click(function () {
                    let option = document.createElement("option");
                    $(option).html("武汉");
                    $("#city").append($(option));
                });
                $("button").eq(1).click(function () {
                    alert($("#city").children().html());
                });
                $("button").eq(2).click(function () {
                    $("#city").html("");
                });
            })
        })
    </script>
</head>
<body>
<select name="" id="city">

</select>
<button>点我设置select标签内容</button>
<button>点我获取select标签内容</button>
<button>点我删除select标签内容</button>


<div id="box"></div>
<button>点我设置div标签内容</button>
<button>点我获取div标签内容</button>
<button>点我删除div标签内容</button>

<p></p>
<button>点我设置p标签内容：静夜思</button>
<button>点我获取p标签内容</button>
<button>点我删除p标签内容</button>
</body>
</html>